<template>
    <div>
<!-- 技术指标表格 -->
      <el-row>
        <el-col :span="16">
          <el-row>
            <p class="pinformation">技术指标</p>
            <p class="totalStyle">共 {{ targetList?.length || 0 }} 条数据</p>
            <el-row style="padding-bottom: 5px; margin-left: 30px">
              <el-button type="success" class="addBtnStyle" link icon="Plus" @click="handleAdd('target')">新增</el-button>
            </el-row>
          </el-row>
          <el-table ref="sub1TableRef" height="7vw" class="business" v-loading="targetTableLoading" :data="targetList">
            <el-table-column label="检测项目" align="center" prop="bucketName">
              <template #default="scope">
                <span v-html="transformation(scope.row.bucketName)"></span>
              </template>
            </el-table-column>
            <el-table-column label="准确度" align="center" prop="accuracy" />
            <el-table-column label="量程" align="center" prop="lc" />
            <el-table-column label="分辨率" align="center" prop="fbl" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template #default="scope">
                <el-button link type="success" icon="Edit" @click="targetEditBtnClick(scope.row)">编辑</el-button>
                <el-button link type="success" icon="Delete" @click="targetDeleteBtnClick(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="8">
          <p style="margin-left: 20px" class="pinformation">仪器照片</p>
          <UploadImage ref="topUploadimageRef" style="margin-left: 100px" :instrumentId="instrumentId" :typeId="18"
            @click="uploadClick('top')" />
        </el-col>
      </el-row>
      <!-- /技术指标表格 -->

      <!-- 仪器档案表格 -->
      <el-row>
        <el-col :span="16">
          <el-row>
            <p class="pinformation">使用说明书</p>
            <p class="totalStyle">
              共 {{ instrumentList?.length || 0 }} 条数据
            </p>
            <el-row style="margin-left: 30px; padding-bottom: 5px">
              <el-button type="success" class="addBtnStyle" link icon="Plus"
                @click="handleAdd('instrument')">新增</el-button>
            </el-row>
          </el-row>
          <el-table ref="sub2TableRef" height="7vw" class="business" :data="instrumentList">
            <el-table-column label="文件名称" align="center" prop="fileMc" />
            <el-table-column label="文件编号" align="center" prop="fileCode" />
            <el-table-column label="上传人" align="center" prop="createUserName" />
            <el-table-column label="上传时间" align="center" prop="createTime" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template #default="scope">
                <el-button link type="success" @click="checkInfoBtnClick(scope.row)">查看</el-button>
                <el-button link type="success" @click="instrumentEditBtnClick(scope.row)">编辑</el-button>
                <el-button link type="success" @click="instrumentDeleteBtnClick(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="8">
          <p class="pinformation" style="margin-left: 20px">仪器合格证</p>
          <UploadImage ref="bottomUploadimageRef" style="margin-left: 100px" :instrumentId="instrumentId"
            :typeId="19" @click="uploadClick('buttom')" />
        </el-col>
      </el-row>
      <!-- /仪器档案表格 -->

      <!-- 保修单表格 -->
      <el-row>
        <p class="pinformation">保修单</p>
        <p class="totalStyle">共 {{ warrantyList?.length || 0 }} 条数据</p>
        <el-row style="margin-left: 30px; padding-bottom: 5px">
          <el-button type="success" class="addBtnStyle" link icon="Plus" @click="handleAdd('warranty')">新增</el-button>
        </el-row>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-table ref="sub3TableRef" max-height="23vw" class="business" :data="warrantyList">
            <el-table-column label="文件名称" align="center" prop="fileMc" />
            <el-table-column label="文件编号" align="center" prop="fileCode" />
            <el-table-column label="上传人" align="center" prop="createUserName" />
            <el-table-column label="上传时间" align="center" prop="createTime" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template #default="scope">
                <el-button link type="success" @click="checkInfoBtnClick(scope.row)">查看</el-button>
                <el-button link type="success" @click="warrantyEditBtnClick(scope.row)">编辑</el-button>
                <el-button link type="success" @click="instrumentDeleteBtnClick(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <add-target-table-dialog ref="targetDialogRef" :instrumentId="instrumentId" :targetList="targetList"
      @updateTargetList="updateTargetList" />

    <add-instrument-table-dialog ref="instrumentDialogRef" :instrumentId="instrumentId"
      @childrenSaveBtn="childrenSaveBtn" />

    <add-warranty-table-dialog ref="warrantyDialogRef" :instrumentId="instrumentId"
      @childrenSaveBtn="childrenSaveBtn" />
      <!-- /保修单表格 -->
    </div>
</template>
<script setup>
import {
  getInstrument,
} from "@/api/resource/instrument";
import {
  delInstrumentItem,
  getFileListAPI,
  deleteFileItem,
  queryFileItemInfo,
} from "@/api/resource/instrumentItem";

import AddTargetTableDialog from "./addTargetTableDialog.vue";
import AddInstrumentTableDialog from "./addInstrumentTableDialog.vue";
import AddWarrantyTableDialog from "./addWarrantyTableDialog.vue";
import UploadImage from "./uploadImage.vue";

const { proxy } = getCurrentInstance();


const targetDialogRef = ref(null);
const instrumentDialogRef = ref(null);
const warrantyDialogRef = ref(null);
const targetTableLoading = ref(false);
const targetList = ref([]);
const instrumentList = ref([]);
const warrantyList = ref([]);

const props = defineProps({
  instrumentId: {
    type: String,
    default: null
  }
});
const instrumentId = ref(props.instrumentId);
// 右侧基础信息 => 点击上方新增
const handleAdd = async (value) => {
  //以下的执行代码说明当前记录是编辑，不需要保存主表信息。
  validateAdd(value);
};

function validateAdd(value) {
  switch (value) {
    case "target":
      targetDialogRef.value.isShowTargetDialog = true;
      break;
    case "instrument":
      instrumentDialogRef.value.isShowInstrumentDialog = true;
      instrumentDialogRef.value.form.isShowFile = true;
      break;
    case "warranty":
      warrantyDialogRef.value.isShowWarrantyDialog = true;
      instrumentDialogRef.value.form.isShowFile = true;
      break;
  }
}

// 技术指标点击编辑
const targetEditBtnClick = async (row) => {
  targetDialogRef.value.isShowTargetDialog = true;
  targetDialogRef.value.addTargetForm = JSON.parse(JSON.stringify(row));
  targetDialogRef.value.jcxmList = [{ bucketId: row.bucketId, jcxmName: row.bucketName }]
};

// 技术指标列表删除按钮
const targetDeleteBtnClick = (row) => {
  proxy.$modal
    .confirm("是否确认删除此数据项？")
    .then(function () {
      delInstrumentItem(row.itemId).then(() => {
        updateTargetList();
        proxy.$modal.msgSuccess("删除成功");
      });
    })
    .catch(() => { });
};

// 技术指标dialog中触发此函数 => 更新技术指标数组
const updateTargetList = async () => {
  const res = await getInstrument(instrumentId.value);
  targetList.value = res.data.instrumentItemList;
};

// 技术指标/使用说明书/保修单dialog点击保存后触发此函数 => 重新获取新增或编辑后的数据
const childrenSaveBtn = async () => {
  const { data: res } = await getFileListAPI({
    groupId: instrumentId.value,
    fileType: 16,
  });
  instrumentList.value = res;

  const { data: res2 } = await getFileListAPI({
    groupId: instrumentId.value,
    fileType: 17,
  });
  warrantyList.value = res2;
};

// 说明书与保修单 => 点击查看
const checkInfoBtnClick = async (row) => {
  const { data: res } = await queryFileItemInfo(row.dataId);
  instrumentDialogRef.value.isShowInstrumentDialog = true;
  instrumentDialogRef.value.form = res;
};

// 使用说明书点击编辑
const instrumentEditBtnClick = async (row) => {
  const { data: res } = await queryFileItemInfo(row.dataId);
  instrumentDialogRef.value.form = res;
  instrumentDialogRef.value.isShowInstrumentDialog = true;
  instrumentDialogRef.value.form.isShowFile = true;
};

// 使用说明书与保修单点击删除
const instrumentDeleteBtnClick = async (row) => {
  proxy.$modal
    .confirm("是否确认删除此数据项？")
    .then(async function () {
      await deleteFileItem([row.dataId]);
    })
    .then(() => {
      proxy.$modal.msgSuccess("删除成功");
      childrenSaveBtn();
    })
    .catch(() => { });
};

// 保修单点击编辑
const warrantyEditBtnClick = async (row) => {
  warrantyDialogRef.value.isShowWarrantyDialog = true;
  instrumentDialogRef.value.form.isShowFile = true;
  const { data: res } = await queryFileItemInfo(row.dataId);
  warrantyDialogRef.value.form = res;
};

// 头像上传 => 点击
const uploadClick = (position) => {
  if (position === "top") {
      proxy.$refs["topUploadimageRef"].open = true;
    } else if (position === "buttom") {
      proxy.$refs["bottomUploadimageRef"].open = true;
    }
};
function transformation(row) {
  const a = proxy.getSupAndSub(row);
  return a;
}
async function handleList(){
  targetTableLoading.value = true;
  await getInstrument(instrumentId.value).then((response) => {
    targetList.value = response.data.instrumentItemList;
    targetTableLoading.value = false;
  });
  childrenSaveBtn();
}
handleList();
</script>